<template>
  <div class="app-container home">
    <panel-group :statistics="statistics" @handle-set-time="handleSetTime" />

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>活动数据趋势</span>
            <div class="time-selector">
              <el-radio-group v-model="timeRange" size="mini" @change="handleTimeRangeChange">
                <el-radio-button label="day">日</el-radio-button>
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="year">年</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <line-chart :chart-data="lineChartData" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>积分兑换情况</span>
          </div>
          <bar-chart :chart-data="barChartData" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>热门活动排行</span>
          </div>
          <div v-loading="hotActivitiesLoading">
            <div v-for="(item, index) in hotActivities" :key="index" class="hot-activity-item">
              <div class="hot-activity-rank">{{ index + 1 }}</div>
              <div class="hot-activity-info">
                <div class="hot-activity-name">{{ item.name }}</div>
                <div class="hot-activity-desc">
                  <el-tag size="mini" :type="item.status === '进行中' ? 'success' : 'info'">{{ item.status }}</el-tag>
                  <span class="hot-activity-participants">{{ item.participants }}人参与</span>
                </div>
              </div>
            </div>
            <div v-if="hotActivities.length === 0" class="empty-data">
              暂无数据
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import BarChart from './dashboard/BarChart'
import { getDashboardData, getActivityTrend, getHotActivities, getExchangeStats } from '@/api/dashboard/index'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    BarChart
  },
  data() {
    return {
      statistics: {
        totalActivities: 0,
        totalParticipants: 0,
        totalCredits: 0,
        totalExchanges: 0
      },
      timeRange: 'month',
      lineChartData: {
        expectedData: [],
        actualData: [],
        xAxisData: []
      },
      barChartData: {
        labels: [],
        values: []
      },
      hotActivities: [],
      hotActivitiesLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        // 获取统计数据
        const { data } = await getDashboardData()
        if (data) {
          this.statistics = {
            totalActivities: data.totalActivities || 0,
            totalParticipants: data.totalParticipants || 0,
            totalCredits: data.totalCredits || 0,
            totalExchanges: data.totalExchanges || 0
          }
        }
        
        // 获取活动趋势数据
        this.fetchActivityTrend()
        
        // 获取热门活动
        this.fetchHotActivities()
        
        // 获取积分兑换情况
        this.fetchExchangeStats()
      } catch (error) {
        console.error('获取首页数据失败', error)
      }
    },
    async fetchActivityTrend() {
      try {
        const { data } = await getActivityTrend({ timeRange: this.timeRange })
        if (data) {
          this.lineChartData = {
            expectedData: data.activities || [],
            actualData: data.participants || [],
            xAxisData: data.timeLabels || []
          }
        }
      } catch (error) {
        console.error('获取活动趋势数据失败', error)
      }
    },
    async fetchHotActivities() {
      try {
        this.hotActivitiesLoading = true
        const { data } = await getHotActivities()
        this.hotActivities = data || []
      } catch (error) {
        console.error('获取热门活动失败', error)
      } finally {
        this.hotActivitiesLoading = false
      }
    },
    async fetchExchangeStats() {
      try {
        const { data } = await getExchangeStats()
        if (data) {
          this.barChartData = {
            labels: data.map(item => item.name) || [],
            values: data.map(item => item.count) || []
          }
        }
      } catch (error) {
        console.error('获取积分兑换情况失败', error)
      }
    },
    handleSetTime(type) {
      console.log(type)
    },
    handleTimeRangeChange() {
      this.fetchActivityTrend()
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .time-selector {
    float: right;
  }
  
  .hot-activity-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .hot-activity-rank {
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background-color: #f0f0f0;
      border-radius: 50%;
      margin-right: 12px;
      font-weight: bold;
      
      &:nth-child(1) {
        background-color: #f56c6c;
        color: #fff;
      }
      
      &:nth-child(2) {
        background-color: #e6a23c;
        color: #fff;
      }
      
      &:nth-child(3) {
        background-color: #409eff;
        color: #fff;
      }
    }
    
    .hot-activity-info {
      flex: 1;
      
      .hot-activity-name {
        font-size: 14px;
        margin-bottom: 5px;
      }
      
      .hot-activity-desc {
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
        
        .hot-activity-participants {
          margin-left: 10px;
        }
      }
    }
  }
  
  .empty-data {
    text-align: center;
    padding: 20px 0;
    color: #999;
  }
}
</style>

